<template>
  <div id="demosticMap">
    <!-- 现存确诊、累计确诊选项 -->
    <div class="map_toggle_top">
      <div
        @click="toggleShowMap(index)"
        :class="[activeIndex == index ? 'activeModule' : '']"
        v-for="(item, index) in toggleMap"
        :key="index"
        class="map_toggle_item"
      >
        {{ item }}
      </div>
    </div>
    <!-- 地图 -->
    <div id="demostic_map_container"></div>
  </div>
</template>

<script>
let myChart; // 地图实例
export default {
  name: "demosticMap",
  data () {
    return {
      toggleMap: ["现存确诊", "累计确诊"], // 切换按钮
      activeIndex: 0, // 切换索引
      allCityDetail: [], // 所有城市信息
      nowPieces: [
        // 图表参数
        {
          // 现存确诊
          min: 300,
          color: "#7D1818",
          label: "300人以上",
        },
        {
          min: 100,
          max: 200,
          color: "#BF2321",
          label: "100-200人",
        },
        {
          min: 50,
          max: 100,
          color: "#FF7B66",
          label: "50-100人",
        },
        {
          min: 1,
          max: 50,
          color: "#FFA789",
          label: "1-9人",
        },
        {
          max: 0,
          min: 0,
          color: "#ffffff",
          label: "无确诊人数",
        },
      ],
      allCityDetailOptions: null, // 现存确诊地图配置选项
      allCitySumDetail: [], // 总计城市数据
      allCitySumDetailOptions: null, // 总计城市数据地图配置选项
      nowPieces2: [
        // 图表参数
        {
          // 现存确诊
          min: 10000,
          color: "#7D1818",
          label: "10000人以上",
        },
        {
          min: 1000,
          max: 9999,
          color: "#BF2321",
          label: "1000-9999人",
        },
        {
          min: 100,
          max: 999,
          color: "#FF7B66",
          label: "500-999人",
        },
        {
          min: 1,
          max: 99,
          color: "#FFA789",
          label: "1-99人",
        },
        {
          max: 0,
          min: 0,
          color: "#ffffff",
          label: "无确诊人数",
        },
      ],
    };
  },
  methods: {
    fGetChartFontSize () {
      // 获取像素比
      const dpr = window.devicePixelRatio;
      let fontSize = 14;
      if (dpr == 2) {
        fontSize = 19;
      } else if (dpr == 3) {
        fontSize = 30;
      } else if (dpr > 3) {
        fontSize = 30;
      }
      return fontSize;
    },

    toggleShowMap (index) {
      // 切换地图
      this.activeIndex = index;

      switch (this.activeIndex) {
        case 0:
          myChart.setOption(this.allCityDetailOptions);
          break;
        case 1:
          myChart.setOption(this.allCitySumDetailOptions);
          break;
        default:
          break;
      }
    },
    // 地图参数
    setMapOptions (cityData, nowPieces) {
      return {
        visualMap: {
          show: true,
          type: "piecewise",
          splitNumber: 4,
          itemWidth: 24,
          itemHeight: 12,
          itemGap: 5,
          textStyle: {
            color: "#999",
            fontSize: 12,
          },
          pieces: nowPieces,
        },
        tooltip: {
          trigger: "item",
          triggerOn: "click",
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '12',    // 文字字体大小
          },
          padding: [7],
          backgroundColor: "rgba(0, 0, 0, 0.623)",
          borderColor: 'transparent',
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            return (
              "地区：" + params.data.name +
              "<br>" +
              "确诊人数：" + params.data.value +
              "<br>" +
              "<a style='color: #FFFFFF' href='ProvinceDetail/"+params.data.name+"&"+params.dataIndex+"'>点击查看详情</a>"
            );
          },
        },
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 10,
                  color: "#333",
                },
              },
              emphasis: {
                show: true,
              },
            },
            data: cityData != undefined ? cityData : [],
          },
        ],
      };
    },
  },
  mounted () {
    this.$nextTick(() => {
      // 判断是否储存了数据
      if (this.$store.state.demosticDetail) {
        // 监获取到了国内基本数据
        let result = this.$store.state.demosticDetail.areaTree[0].children;
        // 存储各城市数据
        for (const item of result) {
          // 格式化 所有城市信息 数据
          this.allCityDetail.push({
            // 添加到  现存数据  当中
            name: item.name,
            value: item.total.nowConfirm,
          });

          this.allCitySumDetail.push({
            // 添加到  累计数据  当中
            name: item.name,
            value: item.total.confirm,
          });
        }
        // return现存与累计两个地图参数
        let option = this.setMapOptions(this.allCityDetail, this.nowPieces);
        let options = this.setMapOptions(
          this.allCitySumDetail,
          this.nowPieces2
        );
        // console.log('------------------------option')
        // console.log(option)
        this.allCityDetailOptions = option;
        this.allCitySumDetailOptions = options;
        // 获取到数据后---》画图
        setTimeout(() => {
          // 基于准备好的dom，初始化echarts实例
          myChart = this.$echarts.init(
            document.getElementById("demostic_map_container"),
            null,
            { renderer: "svg" }
          );
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          // 随着屏幕大小变化而自动变化大小
          myChart.resize();
        }, 300);
      }
    });
  },
  // 防止内存泄漏：释放该页面的charts资源
  beforeDestroy () {
    myChart.clear()
  }
};
</script>
<style scoped>
#demosticMap {
  width: 100%;
  margin-bottom: var(--marginB);
}
.map_toggle_top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.map_toggle_item {
  padding: 5px 10px;
  margin: 0 10px;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 5px;
  transition: all 0.2s linear;
  font-size: 12px;
  /* background-color: rgba(0, 0, 0, 0.623); */
}
.activeModule {
  color: var(--color);
  background-color: rgba(29, 153, 211, 0.122);
  border: 1px solid rgba(29, 153, 211, 0.122);
}
#demostic_map_container {
  width: 100%;
  height: 320px;
}
</style>